<template>
  <div class="accommodation-guide">
    <el-card shadow="hover" class="accommodation-card" v-for="(hotel, index) in hotels" :key="index">
      <div class="hotel-info">
        <div class="hotel-image">
          <img :src="hotel.image" :alt="hotel.name" @error="handleImageError($event, hotel)" />
        </div>
        <div class="hotel-details">
          <h3>{{ hotel.name }}</h3>
          <div class="hotel-rating">
            <el-rate :value="hotel.rating" disabled show-text></el-rate>
          </div>
          <p class="hotel-address"><i class="el-icon-map-marker"></i> {{ hotel.address }}</p>
          <p class="hotel-features"><i class="el-icon-star-off"></i> {{ hotel.features.join(' · ') }}</p>
          <div class="hotel-price">
            <span class="price-tag">{{ hotel.price }}元/晚起</span>
            <el-button type="primary" size="small" class="book-button">查看详情</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
 
  name: 'AccommodationGuide',
  data() {
    return {
      hotels: []
    }
  }, mounted() {
    this.$http.get("userApi/guideCtl/getGuide").then((resp) => {
    	if (resp.data.code == 200) {
    		this.hotels = resp.data.data;
    	} else {
    		this.$message({
    			message: '获取失败',
    			type: 'error'
    		});
    	}
    }).catch(() => {
    	this.$message({
    		message: '网络错误，请稍后重试',
    		type: 'error'
    	});
    })
  },
}
</script>

<style scoped>
.accommodation-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}
.accommodation-card:hover {
  transform: translateY(-5px);
}
.hotel-info {
  display: flex;
  padding: 10px 0;
}
.hotel-image {
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin-right: 20px;
}
.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotel-details {
  flex: 1;
}
.hotel-details h3 {
  margin: 0 0 10px;
  color: #333;
}
.hotel-rating {
  margin-bottom: 10px;
}
.hotel-address,
.hotel-features {
  margin: 0 0 10px;
  color: #666;
  font-size: 14px;
}
.hotel-price {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.price-tag {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
  margin-right: 15px;
}
</style>